<template>
  <el-row>
    <el-card>
      <el-row class="text-right m-b">
        <el-button type="primary" @click="handleAdd()">
          添加行
        </el-button>
        <el-button type="danger" plain @click="batchRemove">
          删除行
        </el-button>
      </el-row>
      <el-form ref="form2" :model="settings" :rules="rules" label-width="150px">
        <el-row :span="24">
          <el-table
            ref="studentTable"
            :data="settings.sysSettings"
            style="width: 100%"
            highlight-current-row
            stripe
            border
            :row-class-name="tableRowClassName"
            @current-change="currentChange"
            @selection-change="clickLogCheckboxHandler"
          >
<!--       <el-table-column
            prop="key"
            label="配置名称"
          >
            <template slot-scope="scope">
              <el-form-item :prop="'sysSettings.'+scope.$index"  label-width="0">
                <el-input v-if="scope.row.showFormDom" v-model="scope.row"/>
                <div v-else>
                  {{ scope.row}}
                </div>
              </el-form-item>
            </template>
         </el-table-column> -->
            <el-table-column
              prop="key"
              label="按钮名称"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'sysSettings.'+scope.$index+'.key'"  label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.key"/>
                  <div v-else>
                    {{ scope.row.key }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
           <el-table-column
              prop="value"
              label="按钮图标"
            >
              <template slot-scope="scope">
                <el-form-item :prop="'sysSettings.'+scope.$index+'.value'"  label-width="0">
                  <el-input v-if="scope.row.showFormDom" v-model="scope.row.value"/>
                  <div v-else>
                    {{ scope.row.value }}
                  </div>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
               prop="value1"
               label="排序号"
             >
               <template slot-scope="scope">
                 <el-form-item :prop="'sysSettings.'+scope.$index+'.value1'"  label-width="0">
                   <el-input v-if="scope.row.showFormDom" v-model="scope.row.value1"/>
                   <div v-else>
                     {{ scope.row.value1 }}
                   </div>
                 </el-form-item>
               </template>
             </el-table-column>
            </el-table>
        </el-row>
        <el-row class="text-center m-t">
          <el-button type="primary" @click="submitHandler">
            保存
          </el-button>
        </el-row>
      </el-form>
    </el-card>
  </el-row>
</template>


<script>
export default {
  data() {
    return {
	  // 选中的行
      selected: null,
      rowIndex: 0,
      // 提交数据
      settings: {
        sysSettings: []
      },
      rules: {
        studentTableDataRules: {
        }
      },
	  // 多选情况下多选数据存储
      selecteds: []
    }
  },
  methods: {
    //获取选中的行
    clickLogCheckboxHandler(selection) {
      this.selecteds = selection
    },
    // 为row添加索引
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    },
    // 新增行
    handleAdd() {
      const list = {
        key: '',
        value: '',
        showFormDom: true
      }
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          if (this.selected !== null) {
            const index = this.selected.row_index
            this.$set(this.settings.sysSettings[index], 'showFormDom', false)
          }
          this.settings.sysSettings.push(list)
          this.selected = list
          this.selected.row_index = this.settings.sysSettings.length - 1
          this.$refs.studentTable.setCurrentRow(this.settings.sysSettings[this.selected.row_index])
        } else {
          // 此处为验证失败代码
          this.$message.warning('请先为当前行填值！')
        }
      })
    },
    // 删除行
    batchRemove() {
      this.$confirm('确认删除选中记录吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          if (this.selected !== null) {
            this.settings.sysSettings.splice(this.selected.row_index, 1)
            this.selected = null
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          } else {
            this.$message({
              message: '请选择要删除的行！',
              type: 'warning'
            })
          }
        })
        .catch(() => {})
    },
    // 改变列表选中
    currentChange(newRow, oldRow) {
      if (this.selected !== null) {
        if (newRow.row_index !== this.selected.row_index) {
          this.$refs['form2'].validate((valid) => {
          const index = this.selected.row_index
          this.$set(this.settings.sysSettings[newRow.row_index], 'showFormDom', true)
          this.$set(this.settings.sysSettings[index], 'showFormDom', false)
          this.selected = newRow
          })
        }
      } else {
        this.$set(this.settings.sysSettings[newRow.row_index], 'showFormDom', true)
        this.selected = newRow
      }
    },
    //保存
    submitHandler() {
      this.$refs['form2'].validate((valid) => {
        if (valid) {
          this.$message({
            showClose: true,
            message: '请完善列表中的数据!',
            type: 'warning'
          })
        } else {
          this.$message({
            showClose: true,
            message: '请完善列表中的数据!',
            type: 'warning'
          })
        }
      })
    },
    async init () {
      const data = (await this.$http.post('/sysSetting/findAllSysSettings')).data
      this.settings.sysSettings = data
      console.log(data)
      console.log(this.settings)
    }
  },
  mounted () {
    this.init()
  }
}
</script>

<style>
</style>
